<template>
  <div class="tpl49-ad">
    <div class="tpl-store">
      <div class="store_activity">
        <div class="store_activity_title">
          <span>门店活动</span>
          <a class="fr" @click="openLink(tplItemData.dataset[0].link)">
            查看更多<em class="icon"><i class="icon-right"></i></em>
          </a>
        </div>
        <div class="store_activity_item">
          <div class="img"><img :src="tplItemData.dataset[0].pic || 'https://img.wifenxiao.com/h5-wfx/images/public/imgError.jpg'"/></div>
          <div class="txt">
            <div class="title">{{ tplItemData.showtitle }}</div>
            <div class="address"><em class="icon"></em></div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    props: {
      tplItemData: {
        type: Object
      }
    },
    methods: {
      openLink(link) {
        openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .tpl49-ad{
    .tpl-store{
      .store_activity{
        background: #fff;
        padding: 24px;
        margin-bottom: 10px;
        &_title{
          margin-bottom: 20px;
          span{
            font-size: 32px;
            color: #333;
          }
          .icon{
          
          }
          a{
            color: #999;
            font-size: 26px;
          }
        }
        &_item{
          display: flex;
          .img{
            width: 220px;
            img{
              width: 100%;
            }
          }
          .txt{
            flex: 1;
            padding-left: 10px;
            .title{
              font-size: 32px;
              line-height: 48px;
              color: #333;
              height: 120px;
            }
            .address{
              font-size: 26px;
              color: #666;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>
